<template>
  <view class="box">
    <u-swiper v-if="img.length" :height="350" :list="img"></u-swiper>
    <view>
      <view class="mylis">
        <view class="top">
          <view class="tit">
            {{ job.title }}
          </view>

          <view v-if="infor.scale" class="month"> 企业规模:{{ infor.scale }} </view>
        </view>
        <view class="bot">

          <view v-if="job.monthlySalaryMin || job.monthlySalaryMax" class="tags">
            {{ job.monthlySalaryMin }}
            {{job.monthlySalaryMax==null?"元/月+":"~"+job.monthlySalaryMax+"元/月"}}

          </view>
          <view v-else class="tags">
            薪资面议
          </view>
            <view v-else class="tags">
             薪资面议
          </view>
          <view class="hours">
            <view class="day"> 工价 </view>
            <view class="moneys">{{ job.wages }}</view>
          </view>
        </view>
        <view class="tags">
          <u-tag
            :key="index"
            v-for="(item, index) in labels"
            class="li"
            :text="item"
            plain
            size="mini"
            type="primary"
          ></u-tag>
        </view>
        <view class="company">
          <view class="company-left">
            <img v-if="infor.logoUrl" :src="infor.logoUrl" />
            <text v-if="infor.name">{{ infor.name }}</text>
          </view>
          <view  @click="openMap" v-if="infor.address" class="company-right">
            <u-icon name="map-fill" color="#ccc" size="28"></u-icon>
            {{ infor.address }}
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
	import Map from '@/js_sdk/ms-openMap/openMap.js'
export default {
  props: ["infor", "job",'img','labels'],
   methods: {
  	openMap(){
		let {lat,lgt,address}  =this.infor;
		Map.openMap(lat, lgt, address, 'bd09')
  	}
  }
};
</script>
<style>
page {
  background: #f5f7f9;
}
</style>
<style scoped lang="scss">

.infor {
  padding-bottom: 70px;
}

.company {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 22rpx;
  margin: 10px 0 0;
  color: #999999;
  &-left {
    display: flex;
    align-items: center;
    font-family: PingFang SC;
    font-weight: bold;

    img {
      width: 25px;
      height: 25px;
      border-radius: 50%;
      margin: 0 5px 0 0;
    }
  }
  &-right {
    text-align: right;
    display: flex;
    align-items: center;
  }
}
.tags {
  margin: 5px 0;
  .li {
    margin-right: 12px;
  }
}
.detail {
  position: relative;
}

.indicatorBox {
  position: absolute;
  bottom: 30px;
  border-radius: 5px;
  background: rgba(235, 96, 59, 0.2);
  display: flex;
  align-items: center;
  left: 20%;
  right: 20%;
  overflow: hidden;

  .lis {
    text-align: center;
    flex: 1;
    line-height: 26px;
    font-size: 12px;
    color: #fff;
    border-color: rgba(255, 255, 255, 0.3);
    border-left: 1px solid rgba(255, 255, 255, 0.3);
  }
  .active {
    background-color: $my-primary;
  }
}

.mylis {
  background: #ffffff;
  padding: 32rpx 32rpx 28rpx;
  border-bottom: 1px solid #f7f8fa;
  &:last-child {
    margin-bottom: 0;
  }

  .top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 15rpx;

    .month {
      text-align: right;
      font-size: 13px;
      color: #999;
      flex: 1;
    }

    .tit {
      flex: 2;
      font-size: 18px;
      font-weight: bold;
      color: #333333;
    }
  }

  .bot {
    display: flex;
    align-items: center;
    justify-content: space-between;

    .hours {
      display: flex;
      align-items: center;

      .day {
        text-align: center;
        width: 80rpx;
        font-size: 12px;
        border-radius: 0 10px 0 10px;
        color: #fff;
        // padding: 0 12px;
        line-height: 22px;
        background: -webkit-linear-gradient(90deg, $my-primary, $my-jb);
        /* Safari 5.1 - 6.0 */
        background: -o-linear-gradient(90deg, $my-primary, $my-jb);
        /* Opera 11.1 - 12.0 */
        background: -moz-linear-gradient(90deg, $my-primary, $my-jb);
        /* Firefox 3.6 - 15 */
        background: linear-gradient(90deg, $my-primary, $my-jb);
      }

      .moneys {
        color: $my-primary;
        font-size: 13px;
        margin-left: 10rpx;
      }
    }

    .tags {
      font-size: 14px;
      color: #fb6464;
    }
  }
}
</style>
